<template>
<div class="content">




  <p style="font-size: xx-large">待完成项目信息</p>
  <div v-for="c in cardContent">
    <el-col :span="6" :offset="2">
      <el-card class="box-card" shadow="hover" :style="c.color">
        <div slot="header" class="clearfix" >
          <span>{{c.pId}}</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="toProjectPercific(c.pId)" >详情</el-button>
        </div>
        <p style="font-size: x-large">{{c.pName}}</p>
        {{c.pDes}}
      </el-card>
    </el-col>
  </div>


  <el-row style="margin-top: 80%" id="detail">
    <el-divider></el-divider>
    <p style="font-size: xx-large">项目详情</p>
    <el-col :span="20" :offset = '2'>
      <el-card class="box-card" shadow="hover">
<!--        项目的详细信息-->
        <div v-if="detailInfo">
          <el-row>
          <div id="basicInfo">
            <el-col :span="18">
          <p style="font-size: large">{{detailInfo.pId}}:{{detailInfo.pName}}</p>
          <p>项目开始时间: {{detailInfo.pCreateDate}}</p>

            <p>
<!--              当前项目文件-->
<!--              <a :href="detailInfo.pFileUrl">-->
<!--                <i class="el-icon-download"></i>-->
<!--              </a>-->
              <el-button @click="getFile">
                下载当前项目文件
              </el-button>

            </p>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">模型组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pModelManagerId}}<br>
              模型人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 4 || stf.sType == 7">
                    <p>{{stf.sName}}</p></div>
                  </div>

              </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">渲染组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pRenderManagerId}}<br>
              渲染人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 5 || stf.sType ==8">
                    <p>{{stf.sName}}</p></div>
                  </div>

              </el-card>
              </el-col>
              <el-col :span="8">
                <el-card class="box-card" shadow="hover">
              <p style="color: #303133">后期组</p>
                  <el-divider></el-divider>
              组长:{{detailInfo.pAfterManagerId}}<br>
              后期人员:
                  <div  v-for="stf in this.nowStaffList">
                    <div v-if="stf.sType == 6 || stf.sType ==9">
                      <p>{{stf.sName}}</p>
                    </div>
                  </div>

              </el-card>
              </el-col>

           </el-col>

            <el-col :span="4" :offset="2">
              <el-steps direction="vertical" :active="(detailInfo.pPeriodStatus==0?5:detailInfo.pPeriodStatus)">
                <el-step title="已创建" icon="el-icon-plus"></el-step>
                <el-step title="模型中" icon="el-icon-s-grid"></el-step>
                <el-step title="渲染中" description="" icon="el-icon-s-platform"></el-step>
                <el-step title="后期中" icon="el-icon-video-camera-solid"></el-step>
                <el-step title="已完成" icon="el-icon-medal-1"></el-step>
              </el-steps>
            </el-col>
          </div>
          </el-row>
          <el-row>
            <el-divider><i class="el-icon-s-promotion"></i></el-divider>
          </el-row>

          <el-col :span="10" :offset = '1'>
            <el-card class="box-card" shadow="hover">
              <p>我的组员</p>
              <i class="el-icon-s-check"></i>

              <el-row>
                <div v-for="i in team4choose">

                  <el-col :span="6" :offset="2">
                    <el-checkbox v-model="i.choosed" :label="i.sName" ></el-checkbox>
                  </el-col>

                </div>
              </el-row>
              <el-row>
                <el-button @click="changeTeamMate">修改我的组员</el-button>
                <el-popover
                  placement="top"
                  width="160"
                  v-model="visible">
                  <p>给我组员工工作情况评分</p>
                  <div style="text-align: right; margin: 0">
                    <div v-for="i in team4choose">
                      <div v-if="i.choosed">
<!--                        <el-checkbox v-model="i.choosed" :label="i.sName" border></el-checkbox>-->
                      <el-tooltip class="item" effect="dark" :content="i.sId+''" placement="top-start">
                        <el-button type="text">{{i.sName}}</el-button>
                      </el-tooltip>
                      <br>
<!--                      任务完成质量：-->
                      <el-rate
                        v-model="i.quality"
                        show-score
                        text-color="#ff9900"
                        score-template="{value}">
                      </el-rate>
<!--                      出勤评价：-->
<!--                      <el-rate-->
<!--                        v-model="i.check"-->
<!--                        show-score-->
<!--                        text-color="#ff9900"-->
<!--                        score-template="{value}">-->
<!--                      </el-rate>-->

                      </div>

                    </div>
                    <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="score">确定</el-button>
                    </div>
                  <el-button class="el-icon-caret-top" slot="reference">评价</el-button>
                </el-popover>
              </el-row>
            </el-card>
          </el-col>

          <el-col :span="10" :offset = '2'>
            <el-card class="box-card" shadow="hover">
<!--              <el-upload-->
<!--                class="upload-demo"-->
<!--                drag-->
<!--                action="C:\Users\27879\source\repos\CodeWorkSapce\HTML\vue_learn\epm-fg\lala.png"-->
<!--                multiple>-->
<!--                <i class="el-icon-upload"></i>-->
<!--                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--&lt;!&ndash;                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
<!--              </el-upload>-->
              <el-row>
              <el-col :offset="4" :span="16">
                <p>文件上传</p></el-col>
              <el-col :span="4">
                <div v-if="this.isIcon">
                  <el-popconfirm
                    :title="hoverTitle"
                    confirm-button-text="查看效果"
                    cancel-button-text="确认"
                  >
                      <el-button style="color: red" @click="checkFile" class="el-icon-more" circle slot="reference"></el-button>
                  </el-popconfirm>

                </div>
              </el-col>
                </el-row>
              <el-row>
              <i class="el-icon-upload"></i>
                </el-row>
              <form id="Form">

                  <input style="margin-left: 0%" type="file" name="file" value="请选择文件"/>
                  <input style="border-radius: 0px" type="button"  value="提交" @click="this.sendData"/>
              </form>
            </el-card>
          </el-col>

        </div>
      </el-card>
    </el-col>
  </el-row>


</div>


</template>

<script>
  import Global from '../../utils/global'


  export default {
    name: 'notFinPro',
    data(){
      return {
        hoverTitle:'来自员工10001的文件',
        isIcon:1,
        value: 0,
        // iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
        visible: false,
        team4choose:[

        ],
        glo:new Global,
        cardContent: [
          // {
          // pId: '100001',
          // pName: '重庆交通大学食堂美味计划',
          // pDes:'嗯嗯，这个有必要！'
          // },
        ],
        detailInfo:null,
        allSIdInThisPro:[],
        nowStaffList:[],
        salaryList:[]
      }
    },
    methods:{
      sendData(){

        var timestamp = (new Date()).valueOf();
        var token = md5("epms" + timestamp);
        var form=document.querySelector("#Form");
        //将获得的表单元素作为参数，对formData进行初始化
        var formdata=new FormData(form);
        formdata.append("type",JSON.parse(sessionStorage.getItem('StaffInfo')).sType)
        formdata.append("pId",this.detailInfo.pId)
        // let data = {
        //   type:1,
        //   pId:this.detailInfo.pId,
        // }
        console.log(formdata)
        //   file:formdata.get('file')
        let that = this
        $.ajax({
          url: this.glo.server+"manager/UploadFile",
          data: formdata,
          method: "POST",
          headers: {
            token: token,
            timestamp: timestamp
          },
          cache: false,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log('res', res);
            that.$message(res.message);
          },
          error: function (err) {
            console.log(err);
          }
        })
      },
      inserNowList (res) {
          console.log('<',res)
          this.nowStaffList = this.nowStaffList.concat(res.data.staffList)
          // this.salaryList = this.salaryList.concat(res.data.salaryList)
          this.allSIdInThisPro= this.allSIdInThisPro.concat(res.data.staffList.map((x)=>x.sId))
        },
      initProjectPage(res){
        res = res.data.commitLogList;
        this.proList  = res;
        sessionStorage.setItem('ProInfoOfOne',JSON.stringify(res))
        for (var pro in res){
          // console.log(res[pro].pPeriodStatus)
          if(res[pro].pPeriodStatus === 0 )continue;
          this.cardContent.push(
            {
              pId:res[pro].pId,
              pName:res[pro].pName,
              pDes:'无描述信息',
              color:"background:"+['#cccccc','#d1dbe5','#d9d9d9','#DCDFE6'][parseInt(Math.random()*100)%4]
            }
          )
        }
      },
      toProjectPercific(pId){
        this.team4choose = []
        this.nowStaffList = []
        this.$message('check'+pId);
        this.detailInfo = this.proList.filter((x)=>x.pId == pId)[0]


        var data = {
          type: 1,
          pId: this.detailInfo.pId
        }
        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)

        var data = {
          type: 2,
          pId: this.detailInfo.pId
        }
        console.log('data',data);
        console.log('manager/getOwnProjectStaff')
        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)
        var data = {
          type: 3,
          pId: this.detailInfo.pId
        }



        this.glo.sendDate(this.glo.server+'manager/getOwnProjectStaff',data,this.inserNowList)

        // console.log(this.nowStaffList)
        // console.log(this.allSIdInThisPro)
        // console.log('l',this.salaryList)



        //将我的组员渲染出来
        //修改team4choose
        let stype = JSON.parse(sessionStorage.getItem('StaffInfo')).sType;

        this.glo.sendDate(this.glo.server+'manager/getOwnStaff',
          {
            type:stype
          },this.insertTeam4Ch)

        window.location.hash = '#detail';
      },
      getFile(){
         var timestamp = (new Date()).valueOf();
         var token = md5("epms" + timestamp);
         window.open("http://47.92.227.185:8080/download/projectFile?token="+token+"&timestamp="+timestamp+"&pId="+this.detailInfo.pId);
      },
      insertTeam4Ch (res) {
        console.log('pro',this.allSIdInThisPro)
        let that = this
        // console.log(res.data.staffList[staff].sId,res.data.staffList[staff].sId in this.allSIdInThisPro)
        let data={
          sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId,
          type:JSON.parse(sessionStorage.getItem('StaffInfo')).sType,
          pId:this.detailInfo.pId
        }
        this.glo.sendDate(this.glo.server+'manager/getSalaryList',data,this.handelSalay)


        // console.log('====\n')
        this.sala = JSON.parse(sessionStorage.getItem('sala'))//==================
        console.log(res.data.staffList)
        for (var staff in res.data.staffList){


          this.team4choose.push(
            {
              sId:res.data.staffList[staff].sId,
              sName:res.data.staffList[staff].sName,
              choosed:this.allSIdInThisPro.indexOf(res.data.staffList[staff].sId) >=0,
              quality:0,
          // this.allSIdInThisPro.indexOf(res.data.staffList[staff].sId) < 0?0:this.sala.filter(
          //       (x)=>(x.sId == res.data.staffList[staff].sId)
          //     )[0].sQuality,//这一部分，若这个员工不是我的员工，就是0，若是我的员工，从所有的员工列表中获取其sQuality
              check:0//出勤
            }
          )

        }
        //console.log(this.team4choose)
      },
      changeTeamMate(){
        // console.log(this.team4choose)
        let sIds = this.team4choose.filter((x)=>x.choosed).map((x)=>x.sId)
        // console.log(this.team4choose.filter((x)=>x.choosed))
        console.log('sids'+sIds)
        var data={
          pId:this.detailInfo.pId,
          sIds:sIds
        }
        this.glo.sendDate(this.glo.server+'manager/distributeStaff',data,(res)=>(alert(res.success?'布置成功':'失败，您已布置过员工')))


      },
      score(){
        this.visible = false;

        //评分
        // console.log(this.team4choose)
        let salaryData = []
        for (var obj in this.team4choose){
          if (!this.team4choose[obj].choosed){
            continue;
          }
          salaryData.push({
            sId:this.team4choose[obj].sId,
            pId:this.detailInfo.pId,
            sQuality:this.team4choose[obj].quality/5,
            sCheckIn:null,
            sSalaryTime:new Date().toISOString().split('T')[0],
            sEvaluation:"暂无评价",
            sStatus:0
          })
        }

        // console.log(salaryData)
        var that = this
        let data = {salaryList:JSON.stringify(salaryData)}
        console.log(data)
        this.glo.sendDate(this.glo.server+'manager/evaluateStaff',data,(x)=>(that.$message(x.message)),"POST")


      },
      handelSalay (res) {
        this.sala = res.data.salaryList;
        console.log(res.data.salaryList)
        console.log(this.sala)
        sessionStorage.setItem('sala',JSON.stringify(this.sala))
      },
      checkFile(){
        this.$message("查看文件中");
      }
    },
    mounted () {
      // console.log(JSON.parse(sessionStorage.getItem('StaffInfo'))+'\n=======')
      let data = {
        sId:JSON.parse(sessionStorage.getItem('StaffInfo')).sId
      }
      this.glo.sendDate(this.glo.server+'manager/getOwnProject',data,this.initProjectPage)
    },
  }
</script>

<style scoped>
  .el-col{
    margin-bottom: 3%;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  p{
    color: #666666;
  }
</style>
